import { memo } from 'react';

import { SvgIcon } from '@/components/icon';
import Markdown from '@/components/markdown';
import { DatasetDataListItemType } from '@/types/dataset';
import { stripIllegalHtmlTags } from '@/utils/regexRules';

interface Props {
  data: DatasetDataListItemType;
  delData?: (id: string) => void;
}

const ChunkItem = ({ data, delData }: Props) => {
  const { _id: id } = data;
  return (
    <div className="flex h-auto w-full cursor-pointer flex-col overflow-clip rounded-xl bg-[#FBFCFF80] p-2 hover:bg-[#FBFCFF] hover:shadow-lg">
      <div className="mt-4 flex">
        <span className="ml-4 text-[#6640FF]">#{data.chunkIndex}</span>
        <span className="ml-auto mr-4 text-[#A5A9BB]">ID: {id}</span>
      </div>
      <div className="ml-2 p-2">
        <Markdown source={stripIllegalHtmlTags(data.q)} />
        {!!data.a && (
          <div>
            <div className="mt-2 border-b border-[#dbdee1]" />
            <Markdown source={stripIllegalHtmlTags(data.a)} />
          </div>
        )}
      </div>
      <div className="flex">
        <div className="ml-4">
          <SvgIcon color="#A5A9BB" icon="icon_text" />
          <span className="ml-1 text-xs text-[#A5A9BB]">{data.q.length}</span>
        </div>
        <div className="ml-auto mr-4">
          {/* <DeleteIconButton
            color="#A5A9BB"
            onClick={(e) => {
              e.stopPropagation();
              delData && delData(data._id);
            }}
          /> */}
          <SvgIcon
            size={16}
            icon="message-ic3"
            color="#A5A9BB"
            onClick={(e) => {
              e.stopPropagation();
              delData && delData(id);
            }}
          />
        </div>
      </div>
    </div>
  );
};

export default memo(ChunkItem);
